<template>
  <div class="equipment-animation">
    <svg class="out-circle" v version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="linear4" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#d0d3d7" stop-opacity="0.0" />
          <stop offset="50%" stop-color="#d0d3d7" stop-opacity="1.0" />
          <stop offset="100%" stop-color="#d0d3d7" stop-opacity="0.0" />
        </linearGradient>
      </defs>
      <path
        d="M 110 10 a 100 100 0 0 1 0 200"
        fill="none"
        stroke="url(#linear4)"
        transform="rotate(-50,110,110)"
        stroke-width="4"
      ></path>
    </svg>
    <svg class="medium-circle" ersion="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="linear3" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#00c8fe" stop-opacity="1.0" />
          <stop offset="100%" stop-color="#00c8fe" stop-opacity="1.0" />
        </linearGradient>
      </defs>
      <circle
        cx="100"
        cy="100"
        r="100"
        stroke="#0b456a"
        stroke-width="10"
        transform="translate(10,10)"
        fill="transparent"
      />
      <path
        d="M 110 10 a 100 100 0 0 1 0 200"
        stroke-dasharray="200"
        fill="none"
        stroke="url(#linear3)"
        stroke-width="10"
      >
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          from="360 110 110"
          to="0 110 110"
          begin="0s"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform>
      </path>
      <circle
        cx="100"
        cy="100"
        r="100"
        stroke="#111f30"
        stroke-width="10"
        transform="translate(10,10)"
        stroke-dasharray="3,4"
        fill="transparent"
      />
    </svg>
    <svg
      class="inner-circle"
      v
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#01d7e6" stop-opacity="0.4" />
          <stop offset="100%" stop-color="#01d7e6" stop-opacity="0.8" />
        </linearGradient>
        <linearGradient id="linear2" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#01d7e6" stop-opacity="0.4" />
          <stop offset="100%" stop-color="#01d7e6" stop-opacity="0" />
        </linearGradient>
      </defs>
      <path
        d="M 110 10 a 100 100 0 0 1 0 200"
        fill="none"
        stroke="url(#linear1)"
        stroke-width="8"
      >
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          from="0 110 110"
          to="360 110 110"
          additive="sum"
          begin="0s"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform>
      </path>
      <path
        d="M 110 10 a 100 100 0 0 1 0 200"
        transform="translate(220.1,220)rotate(180)"
        fill="none"
        stroke="url(#linear2)"
        stroke-width="8"
      >
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          from="0 110 110"
          to="360 110 110"
          additive="sum"
          begin="0s"
          dur="2s"
          repeatCount="indefinite"
        ></animateTransform>
      </path>
    </svg>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.equipment-animation {
  width: 220px;
  height: 220px;
  position: relative;

  .out-circle {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .medium-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: scale(0.85);
  }

  .inner-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: scale(0.7);
  }
}
</style>